.TheneBackSelect {
    width: 1200px;
    height: 60vh;
    overflow-y: scroll;

    &::-webkit-scrollbar {
        display: none;
    }

    .ant-collapse-header {
        font-size: 16px;
        font-family: ShuHeiTi;
        font-weight: bold;
    }

    .ant-collapse-content {
        background: transparent;
    }

    .TheneBackSelect__Common {
        width: 100%;
        height: calc(60vh - 240px);
        overflow-y: scroll;

        &::-webkit-scrollbar {
            display: none;
        }
    }


    .TheneBackSelect__Image {
        display: flex;
        align-items: flex-start;
        justify-content: space-around;
        flex-wrap: wrap;

        &>img,
        &>.ant-ribbon-wrapper {
            width: 45%;
            aspect-ratio: 1920 / 1080;
            margin: 8px 0;
            border-radius: 6px;
            cursor: pointer;

            &>img {
                width: 100%;
                height: 100%;
                border-radius: 6px;
            }
        }
    }

    .TheneBackSelect__Color {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 8px;


        &>.ant-ribbon-wrapper {
            flex: 1;
            aspect-ratio: 1920/1080;
            margin-bottom: 16px;

            &>.Back {
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 1;
                aspect-ratio: 1920/1080;
                margin-bottom: 16px;
                font-size: 24px;
                font-family: ShuHeiTi;
                font-weight: bold;
                border-radius: 6px;
                text-shadow: 0 0 8px #fff, 0 0 16px #fafafa, 0 0 32px #cccccc;
                background: var(--back);
                cursor: pointer;
                user-select: none;
            }
        }

        &>.Back {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            aspect-ratio: 1920/1080;
            margin-bottom: 16px;
            font-size: 24px;
            font-family: ShuHeiTi;
            font-weight: bold;
            border-radius: 6px;
            text-shadow: 0 0 8px #fff, 0 0 16px #fafafa, 0 0 32px #cccccc;
            background: var(--back);
            cursor: pointer;
            user-select: none;
        }

        &>.CommonForm {
            width: 800px;

            &>.Label {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: row;

                &>div:last-child {
                    flex: 1;
                }
            }
        }

    }

    .TheneBackSelect__Css {
        display: flex;
        align-items: flex-start;
        justify-content: space-around;
        flex-wrap: wrap;
        user-select: none;

        &>.Patter__Render,
        &>.ant-ribbon-wrapper {
            position: relative;
            width: 45%;
            aspect-ratio: 1920 / 1080;
            margin: 8px 0;
            border-radius: 6px;
            cursor: pointer;

            &>.Patter__Render {
                position: relative;
                width: 100%;
                height: 100%;
                border-radius: 6px;
            }
        }

        .Patter__Options {
            position: absolute;
            left: 16px;
            top: 16px;
            background: #f8f8f8;
            padding: 8px 16px;
            font-size: 16px;
            font-family: ShuHeiTi;
            font-weight: bold;
            border-radius: 6px;
            color: #262626;
            transition: all 0.35s;

            &:hover {
                background: #262626;
                color: #f8f8f8;
            }

        }
    }
}